/**
 * 默认长度4个字
 * @param param0 
 * @returns 
 */
export default function Label(
	{
		label,
		required,
		colon,
		width = '10rem',
		justifyContent = 'flex-start'
	}: {
		label: string;
		required?: boolean;
		colon?: boolean;
		width?: string;
		justifyContent?: 'flex-start' | 'flex-end'
	}
) {

	return <>
		<div className='bg'>
			{required && <img style={{ marginRight: '0.5rem' }} src={'/images/required.png'} />}
			<span className='lbl'>{label}{colon && <span>：</span>}</span>
		</div>
		<style jsx>{`
.bg{
display: flex;
flex-direction: row;
justify-content: ${justifyContent};
align-items: center;
width: ${width};
flex-grow: 0;
}
.lbl{
font-size: 0.875rem;
color: #000000;
text-align: end;
}
		`}</style>
	</>;
}
